<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .btbd{
                width: 100px;
                height: 30px;
                margin: 30px 0 0 600px;
            }
        </style>
        <script>
            //定义通过id获取页面元素的方法
            var $ = function (a) {
                return document.getElementById(a)
            };

            var globe_width = 0;
            var globe_height = 0;

            //窗口的缩放
            window.onresize = function () {

                //处理背景层
                $('back').style.width = document.documentElement.clientWidth + 'px';
                $('back').style.height = document.documentElement.clientHeight + 'px' ;

                //处理窗口居中问题
                var forea = $('fore');
                forea.style.left = (document.documentElement.clientWidth - 500) / 2 + 'px' ;
                forea.style.top = (document.documentElement.clientHeight - 238   ) / 2 + 'px' ;
            };



            //定义打开窗口的方法
          //  var win = function (winWidth,winHeight,title,cnt) {
               //globe_width = winWidth;
              // globe_height = winHeight;


            //};


            //定义打开窗口的方法：
            var win = function () {
                //构建一个div(背景层)
                var _back = document.createElement('div');
                _back.id = 'back';
                _back.style.position = 'absolute';
                _back.style.left = 0;
                _back.style.top = 0;
                _back.style.opacity = 0.8;
                _back.style.backgroundColor ='gainsboro';
                _back.style.width = document.documentElement.clientWidth + 'px' ;
                _back.style.height = document.documentElement.clientHeight + 'px' ;

                //放在文档body里
                document.body.appendChild(_back);
            };

            var wins = function () {
                //构建一个div（前景层）
                var _fore = document.createElement('div');
                _fore.id = 'fore';
                _fore.style.position = 'absolute';
                _fore.style.top = ((document.documentElement.clientHeight - 280)/ 2 ) + 'px';
                _fore.style.left = ((document.documentElement.clientWidth - 500)/ 2 ) + 'px' ;
                _fore.style.width = '500px';
                _fore.style.height = '280px';
                _fore.style.border = '1px solid lightgray';
                _fore.style.backgroundColor = 'whitesmoke';

                //创建一个标题
                var _title = document.createElement('div');
                _title.textContent = "请输入你需要添加的好友名称：";
                _title.style.float = 'left';
                _title.style.height = '40px';
                _title.style.lineHeight= '40px';
                _fore.appendChild(_title);

                //用于关闭窗口
                var close = function () {
                    document.body.removeChild(back);
                    document.body.removeChild(_fore);
                };

                var _close = document.createElement('div');
                _close.textContent = "X";
                _close.style.height = '40px';
                _close.style.lineHeight= '40px';
                _close.style.float = 'right';
                _close.style.fontSize = '18px';
                _close.style.cursor = 'pointer';
                _close.style.marginRight= '10px';

                //给X设置一个点击事件
                _close.onclick = function () {
                    close();
                };
                _fore.appendChild(_close);

                var addbd = document.createElement('iframe');
                //addbd.style.position = 'absolute';
                //addbd.style.top = ((document.documentElement.clientHeight - 280)/ 2 ) + 'px';
               // addbd.style.left = ((document.documentElement.clientWidth - 500)/ 2 ) + 'px' ;
                addbd.style.width = '500px';
                addbd.style.height = '238px';
                addbd.src = 'http://baidu.com';
                _fore.appendChild(addbd);



                //放在文档body里
                document.body.appendChild(_fore);

            };

                window.onload = function () {
                    //给百度按钮设置一个点击事件
                    $('btbd').onclick = function () {
                        win();
                        wins();
                    };
                };



        </script>
    </head>
    <body>
        <button class="btbd" id="btbd">百度</button>
    </body>
</html>